<template>
  <Card :padding="10" dis-hover>
    <Row>
      <Col>
        <Form :model="formItem" ref="form" :label-width="50" inline style="padding-top: 8px">
          <FormItem label="组" prop="groupName">
            <Select
              v-model="formItem.groupName"
              filterable
              :remote-method="mth"
              default-label=""
              :loading="loading"
              style="width: 200px"
            >
              <Option v-for="(item, index) in groups.data" :value="item.value" :key="index"
                >{{ item.label }}
              </Option>
            </Select>
          </FormItem>

          <FormItem label="值" prop="value"
            ><Input v-model="formItem.value" placeholder="" style="width: 200px" />
          </FormItem>

          <FormItem label="文本" prop="text"
            ><Input v-model="formItem.text" placeholder="" style="width: 200px" />
          </FormItem>
        </Form>
      </Col>
      <Col>
        <Space
          ><Button type="primary" icon="ios-search" @click="initList(1, 15)">搜索</Button
          ><Button type="error" @click="clear" icon="md-refresh">重置</Button
          ><Button type="success" @click="add(1, {})" icon="md-add">新增</Button>
          <Upload
            ref="upload"
            :action="upload_url"
            :headers="headers"
            :on-success="handleSuccess"
            style="padding-top: 9px"
          >
            <Button type="info" icon="md-cloud-upload">导入</Button>
          </Upload>
        </Space>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <Table
          :paras="{
            columns: table.columns,
            data: table.data,
            loading: table.load,
            pageNo: formItem.pageNo,
            pageSize: formItem.pageSize,
          }"
        >
          <template #Action="{ row }">
            <Space>
              <Tooltip content="编辑" placement="top" transfer
                ><Button type="primary" icon="md-create" @click="add(2, row)"></Button
              ></Tooltip>
              <Poptip
                transfer
                confirm
                title="是否删除?"
                @on-ok="cancel(row.enumID)"
                @on-cancel="cancel"
                ok-text="是"
                cancel-text="否"
              >
                <Tooltip content="删除" placement="top" transfer
                  ><Button type="error" icon="md-close-circle"></Button
                ></Tooltip>
              </Poptip>
            </Space>
          </template>
        </Table>
        <Pager
          :paras="{ total: table.total, page: formItem.pageNo, size: formItem.pageSize }"
          @toPage="initList"
          @toSize="initList"
        >
        </Pager>
      </Col>
    </Row>
  </Card>
  <AddOrUpdate ref="modal" @initList="initList(1, 15)"></AddOrUpdate>
</template>
<script setup>
import http from '@/util/http'
import { reactive } from 'vue'
import Table from '@/components/system/Table.vue'
import Pager from '@/components/system/Pager.vue'
import AddOrUpdate from './AddOrUpdate.vue'
let { proxy } = getCurrentInstance()
let form = ref()
let upload = ref()
let loading = ref(false)
let groups = reactive({ data: [] })
let modal = ref()
let upload_url = import.meta.env.VITE_BASEURL + '/api/Basic/Enum/Import'
var token = sessionStorage.getItem('token')
var tenantID = sessionStorage.getItem('tenant')

let headers = {
  Authorization: 'Bearer ' + token,
  TenantID: tenantID,
}

const mth = (query) => {
  groups.data = []
  loading.value = true
  http.get('/Basic/Enum/GetGroup?name=' + query, {}, (response) => {
    if (response.data.flag) {
      groups.data = response.data.data
      loading.value = false
    } else {
    }
  })
}

let formItem = reactive({
  groupName: '',
  value: '',
  text: '',
  pageSize: 15,
  pageNo: 1,
})
let table = reactive({
  data: [],
  total: 0,
  columns: [
    {
      title: '组',
      align: 'center',
      key: 'group',
    },
    {
      title: '值',
      align: 'center',
      key: 'value',
    },
    {
      title: '文本',
      align: 'center',
      key: 'text',
    },
    {
      title: '说明',
      align: 'center',
      key: 'desc',
    },
    {
      title: '添加时间',
      align: 'center',
      key: 'addTime',
    },
    {
      title: '修改时间',
      align: 'center',
      key: 'updTime',
    },
    {
      title: '操作',
      slot: 'Action',
      align: 'center',
    },
  ],
  load: true,
})

const initList = (page, size) => {
  formItem.pageNo = page
  formItem.pageSize = size
  table.load = true

  http.post('/Basic/Enum/PageList', toRaw(formItem), (response) => {
    table.load = false
    table.data = response.data.data.list
    table.total = response.data.data.total
  })
}

initList(1, 15)

const clear = () => {
  form.value.resetFields()
}

const add = (type, data) => {
  modal.value.show(type, data)
}
const cancel = (enumID) => {
  var enumIDs = []
  enumIDs[0] = enumID
  http.get('/Basic/Enum/Del?enumIDs=' + enumIDs, {}, (response) => {
    if (response.data.flag) {
      initList(1, 15)
      proxy.$Message.success(response.data.msg)
    } else {
      proxy.$Message.error(response.data.msg)
    }
  })
}

const handleSuccess = (res, file) => {
  proxy.$Message.success(res.msg)
  initList(1, 15)
  upload.value.clearFiles()
}
</script>
